<template>
  <div class="h-full flex relative">
    <div class="flex-1 overflow-y-auto" ref="documentContainer">
      <div
        class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 flex flex-col">
        <div class="flex-grow overflow-y-auto">
          <h3 class="text-center text-2xl font-bold mb-8">谈心谈话记录</h3>

          <!-- 基本信息 -->
          <div class="mb-6 text-base text-gray-800 space-y-2">
            <p><strong>谈话人：</strong><span class="font-normal">{{ talkerName }}</span></p>
            <p><strong>申请人：</strong><span class="font-normal">{{ applicantName }}</span></p>
          </div>

          <!-- 谈话内容 -->
          <div class="mb-4">
            <p class="mb-3"><strong>谈话内容摘要：</strong></p>
            <div class="space-y-3 text-justify">
              <p class="indent-8 mb-4 text-justify">
                <strong class="font-semibold">{{ talkerName }}：</strong>
                你好，{{ applicantName }}同志。你递交入党申请书已有一段时间，今天想和你聊一聊，了解你近期的思想动态和对党的认识。
              </p>
              <p class="indent-8 mb-4 text-justify">
                <strong class="font-semibold">{{ applicantName }}：</strong>
                谢谢组织的关心。递交申请后，我通过学习和思考，对党的认识更加深刻了。
              </p>

              <p class="text-center text-gray-400 my-8 py-4 border-y border-gray-200">
                [ 此处省略谈话记录约500字 ]
              </p>

              <p class="indent-8 mb-4 text-justify">
                <strong class="font-semibold">{{ talkerName }}：</strong>
                希望你能在今后的学习和生活中，继续以党员的标准严格要求自己，积极向组织靠拢。
              </p>
            </div>
          </div>

        </div>

        <!-- 签名区域 -->
        <div class="mt-8 text-right self-end font-songti">
          <div class="mb-2">
            <p class="text-gray-800 text-lg font-kaiti">谈话人：{{ talkerName }}</p>
            <p class="text-gray-800 text-lg font-kaiti mt-1">申请人：{{ applicantName }}</p>
          </div>
          <p class="text-gray-600 mt-2 flex items-center justify-end">
            <n-tooltip v-if="getValidationInfo('signatureDate')" trigger="hover">
              <template #trigger>
                <n-icon :size="16" :color="getLevelColor(getValidationInfo('signatureDate').level)" class="mr-1.5">
                  <component :is="getIconComponent(getValidationInfo('signatureDate').level)" />
                </n-icon>
              </template>
              <span>{{ getValidationInfo('signatureDate').message }}</span>
            </n-tooltip>
            <span id="section-signature">{{ signingDate }}</span>
          </p>
        </div>
      </div>
    </div>
    
    <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
       <n-anchor :bound="500">

          <n-anchor-link title="落款日期" href="#section-signature" />
        </n-anchor>
      </div>
    </div>


  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { NTooltip, NIcon, NAffix, NAnchor, NAnchorLink } from 'naive-ui'
const documentContainer = ref(null)

const props = defineProps({
  member: { type: Object, default: () => ({}) },
  validation: { type: Array, default: () => [] }
})

import { getLevelColor, getIconComponent } from '@/utils/levelUtils.js'

// 验证信息处理逻辑
function getValidationInfo(key) {
  if (!props.validation || !Array.isArray(props.validation)) {
    return null
  }
  return props.validation.find(item => item.key === key)
}

const talkerName = computed(() => props.member?.heartToHeartTalk?.talkerName || '（谈话人未填写）')
const applicantName = computed(() => props.member?.memberName || '（申请人姓名未填写）')

// 日期格式处理逻辑
const signingDate = computed(() => {
  const date = props.member?.heartToHeartTalk?.signatureDate
  if (!date) return '（日期未填写）'
  if (date.includes('年')) return date
  const [year, month, day] = date.split('-')
  return `${year}年${month}月${day}日`
})
</script>

<style scoped>
.font-songti {
  font-family: "SimSun", "STSong", serif;
}

.font-kaiti {
  font-family: "KaiTi", "STKaiti", serif;
}
</style>